<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
        <el-card>
          <div class="uploadViewTop uploadViewTop1">
            <div class="uploadTitle">软件升级</div>
            <div class="fileSuffix">文件后缀名：.bin</div>
          </div>
          <div style="padding: 14px;">

            <div class="bottom clearfix">

              <el-upload

                class="upload-demo"
                :action="uploadUrl"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="onSuccess"
                :before-remove="beforeRemove"
                :on-progress="onProgress"
                auto-upload
                :limit="1"
                accept=".bin"
                :on-exceed="handleExceed"
              >
                <transition name="el-zoom-in-top">
                  <el-button size="small" v-show="selectFileBtn">选择文件</el-button>
                </transition>


                <!--<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
              </el-upload>
              <transition name="el-fade-in-linear">
                <p v-show="progress" id="uploadMsg">设备正在处理文件<i style="margin-left: 10px" class="el-icon-loading"></i></p>
              </transition>

              <br>
              <!--<el-button>选择文件<i class="el-icon-upload el-icon&#45;&#45;right"></i></el-button>-->
              <transition name="el-fade-in-linear">
                <el-button type="primary" @click="restartConfirm" v-show="uploadBtn">升级</el-button>
              </transition>

            </div>
          </div>
        </el-card>
      </el-col>

    </el-row>
  </div>
</template>

<script>
    export default {
        name: "upgrade",
      data:function () {
        return{
          dialogVisible: false,
          uploadUrl:'http://'+this.BASE.serverIP+':8096/upload',
          upgradeIndex:1,
          selectFileBtn:true,
          currentDate: new Date(),
          uploadBtn:false,
          progress:false,
          sofeBtn:false,
          fileList: [
            {name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}
            ],
          restartStatus:false
        }
      },
      mounted:function(){
        // this.tips('重启设备失败','error')
      },
      methods: {
        restartConfirm:function(){
          console.log('确定重启');
          var _this=this
          _this.getAjax({
            params:{
              opt:'device-reboot',
              ajaxTime:new Date().getTime()
            }
          }).then(function (res) {
            console.log('重启回调参数',res);
            var restartLoading = _this.$loading({
              target:'.app-main',
              lock: true,
              text: '正在重启，请稍后...',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            });
            var restartInterval=setInterval(function () {
              if(_this.restartStatus){
                sessionStorage.clear()
                _this.tips('升级成功','success')
                console.log('重启成功');
                clearInterval(restartInterval)
                restartLoading.close()
                // _this.tips('重启成功','success')
                if(_this.newIP){
                  location.href="http://"+_this.newIP
                }else{
                  setTimeout(function () {
                    _this.$router.push({ path: '/' })
                  },1000)
                }

              }else{
                _this.getrebootstatus()
              }

            },2000)
          }).catch(function (err) {
            _this.tips('重启设备失败','error')
            console.log(err.response);
          }).finally(function (fn) {
            console.log(fn);
          })

        },
        getrebootstatus:function () {
          var _this=this
          _this.postAjax({
            method:'getrebootstatus',
            params:{},
            newIP:_this.newIP?'http://'+_this.newIP+'/LadderInspection':_this.BASE.interfaceAddress
          }).then(function (res) {
            console.log(res);
            if(res.params.rebootstatus==1){
              sessionStorage.clear()
              setTimeout(function () {
                _this.restartStatus=true
              },2000)
            }else{
              // _this.tips(res.errorInfo.detail,'error')
            }
          }).catch(function (err) {
            console.log(err);
          }).finally(function (fn) {
            console.log(fn);
          })
        },
        onSuccess:function(response, file, fileList){
          var _this=this
          _this.progress=false
          setTimeout(function () {
            _this.uploadBtn=true
          },500)
          console.log('文件上传成功');
        },
        onProgress:function(event, file, fileList){
          console.log(event, file, fileList);
          this.selectFileBtn=false
          console.log(event.percent);
          if(event.percent==100){
            this.progress=true
          }
        },
        handleRemove(file, fileList) {
          this.uploadBtn=false
          this.selectFileBtn=true
          console.log(file, fileList);
        },
        handlePreview(file) {
          this.uploadBtn=false
          console.log(file);
        },
        handleExceed(files, fileList) {
          this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
          return this.$confirm(`确定移除 ${ file.name }？`);
        }
      }
    }
</script>

<style scoped>
  >>>.el-card__body{
    padding: 0 !important;
  }
  #uploadMsg{
    color:#666;
    font-size: 14px;
  }
  .uploadViewTop{
    width: 100%;
    min-height: 100px;
    color:#fff;
  }
  .fileSuffix{
    font-size: 14px;
    margin-left: 20px;
  }
  .uploadViewTop1{
    background-image: linear-gradient(to left, #22E1FF 0%, #1D8FE1 48%, #625EB1 100%);
  }
  .uploadViewTop2{
    background-image: linear-gradient(to right, #AC32E4 0%, #7918F2 48%, #4801FF 100%);
  }
  .uploadTitle{
    font-weight: bold;
    font-size: 18px;
    line-height: 50px;
    margin-left: 20px;
  }
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    /*margin-top: 13px;*/
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>
